<template>
	<view>
		<view>
			<view class="coupon">优惠卷</view>
			<view class="coupon-cens" v-for="(item,index) in 3" :key="index">
				<view class="coupon-cen">
					<view class="coupon-left">
						<view class="coup">
							<view class="price">￥10</view>
							<view class="price_choose">满100元使用</view>
						</view>
					</view>
					<view class="coupon-con">
						<view class="coupon-text1">洗剪吹优惠卷</view>
						<view class="coupon-text2">领券当日生效，生效起180天内可用</view>
						<view class="coupon-text3">已领取：0张 剩余：1000张</view>
					</view>
					<view class="coupon-right">
						<text>领取</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss">
	.coupon {
		line-height: 78rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #282828;
		border-bottom: 1rpx solid #E0E0E0;
	}
	
	.coupon-cens {
		padding: 0 20rpx;
	
		.coupon-cen {
			display: flex;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #F1F1F1;
	
			.coupon-left {
				width: 201rpx;
				height: 120rpx;
	
				background: #00C6C2;
				border-radius: 4px;
				text-align: center;
				
				.coup{
					padding: 20rpx 22rpx;
					
					.price{
						font-size: 36rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
					}
					.price_choose{				
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
				
			}
	
			.coupon-con {
				width: 50%;
				padding-left: 20rpx;
				
				.coupon-text1{				
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;					
				}
				
				.coupon-text2{	
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8A8A8A;
					padding: 15rpx 0;
				}
				.coupon-text3{			
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8A8A8A;
				}
			}
	
			.coupon-right {
				width: 20%;
				margin: auto;
				
				text{
					margin-top:40rpx ;
					display: inline-block;
					padding:10rpx 21px;
					background-color:#00C6C2 ;
					color: #fff;
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: bold;
					border-radius: 45rpx;
				}
			}
		}
	}
</style>
